<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console1.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-select dl {
            max-height: 260px;
        }

        .layui-disabled {
            color: black !important;
        }

        .layui-form-item .layui-input-inline {
            width: 325px;
        }
        .layui-input-block {
            margin-left: 0px !important;
        }
</style>
</head>
<body class="pear-container" style="">
<form class="layui-form" action="" onsubmit="return false">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-sm12">
            <div class="layui-card" style="min-height: 429px;display: flex;flex-direction: column;justify-content: center;">
                <div class="layui-card-body" style="    display: flex;
    flex-direction: column;
    align-items: center;">
                    <div class="layui-form-item" style="display: none">
                        <div class="layui-input-inline">
                            <input type="text" name="id" autocomplete="off" th:value="${id}"
                                   placeholder="请输入文件名称"
                                   class="layui-input required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">文件名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="fileName" autocomplete="off" th:value="${file_name}"
                                   placeholder="请输入文件名称"
                                   class="layui-input required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="editSave">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var numberOfLayers = parseInt([[${numberOfLayers}]]);
    var numberOfColumns = parseInt([[${numberOfColumns}]]);
    var $ = layui.jquery;
    var layerMap = [[${layerMap}]];
    var RFIDCheck = [[${RFIDCheck}]];
    var uuid = null;

    if (RFIDCheck == '0') {
        $("#fileIdLabel").removeClass("required");
        $("#fileIdInput").removeAttr("lay-verify");
        $("#fileIdInput").removeAttr("lay-reqtext");
        $(".colnumnLabel").removeClass("required");
        $(".colnumnSelect").removeAttr("lay-verify");
        $(".colnumnSelect").removeAttr("lay-reqtext");
    }

    //验证是否超过最大值
    function checkLayerVal() {
        let val = $("#layer").val();
        if (val > numberOfLayers) {
            val = numberOfLayers;
        } else if (val <= 1) {
            val = 1;
        }
        $("#layer").val(val);
    }

    //验证是否超过最大值
    function checkColumnVal() {
        let val = $("#column").val();
        if (val > numberOfColumns) {
            val = numberOfColumns;
        } else if (val <= 1) {
            val = 1;
        }
        $("#column").val(val);
    }

    layui.use(['form', 'jquery', 'laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        var util = layui.util;

        form.on('select(deptId)', function (data) {
            var value = data.value;
            let insertHtml = '<option value="">请选择机柜</option>';
            $.get("/file/manage/get/cabinet/by/dept", {"deptId": value}, function (data) {
                for (index in data) {
                    insertHtml += '<option value="' + data[index] + '">' + data[index] + '</option>';
                }
                $("#cabinetNumber").html(insertHtml);
                form.render('select');
            });

        });

        // 机柜编号
        form.on('select(cabinetNumber)', function (data) {
            var value = data.value;
            let insertHtml = '<option value="">请选择箱门编号</option>';
            $.get("/file/manage/box/door/get/settings", {"number": value}, function (data) {
                for (index in data) {
                    insertHtml += '<option value="' + data[index] + '">' + data[index] + '</option>';
                }
                $("#boxDoor").html(insertHtml);
                form.render('select');
            });
            const selectElement = document.getElementById('layer');
            selectElement.innerHTML = '';
            const selectElement2 = document.getElementById('column');
            selectElement2.innerHTML = '';
        });



        //打印
        util.on('lay-on', {
            //打印
            'qrCodePrinting': function () {
                let fileName = $("#fileName").val();
                if (fileName != "") {
                    // 页面层
                    layer.open({
                        title: '二维码生成',
                        type: 2,
                        area: ['400px', '300px'],
                        // offset: ['837px', '105px'],
                        content: '/file/manage/qrCode?fileName=' + fileName,
                        success: function (layero, index, that) {
                        },
                        end: function () {
                        }
                    });
                }
            },
        })


        laydate.render({
            elem: '#selectTime' //指定元素
            , theme: '#393D49',
            type: 'year'
        });
        laydate.render({
            elem: '#entryTime' //指定元素
            , theme: '#393D49',
            type: 'datetime'
        });

        var getRFId;

        //执行定时器
        function startInterval(data) {
            getRFId =
                setInterval(function () {
                    $.ajax({
                        url: '/file/manage/getRFID',
                        data: JSON.stringify(data.field),
                        dataType: 'json',
                        contentType: 'application/json',
                        type: 'post',
                        success: function (result) {
                            if (result.code == 200) {
                                $("#fileIdInput").val(result.data);
                                // $("#manageSave").css("display","none");
                                $("#manageSave").text("立即提交");
                                // $("#submit").removeAttr("style");
                                clearTimeout(getRFId);
                            }
                        }
                    })
                }, 1000);
        }

        // $("#reset").click(function () {
        //     clearTimeout(getRFId);
        // })


        form.on('submit(editSave)', function (data) {
            let loading = layer.load();
            $.ajax({
                url: '/file/manage/edit/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 200) {
                        layer.msg(result.message, {icon: 1, time: 3000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                            parent.layui.table.reload("valid");
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
            // }
            return false;
        });

        //第一次默认渲染
        // columnSelect(layerMap[1])
        function columnSelect(columnList) {
            let insertHtml = '<option value="">请选择列</option>';
            for (let column in columnList) {
                insertHtml += '<option value="' + columnList[column] + '">' + columnList[column] + '</option>';


            }
            $("#columnSelect").html(insertHtml);
            form.render('select'); //刷新select选择框渲染
        }

        //动态渲染下拉框
        form.on('select(layerChange)', function (data) {
            let selectVal = data.value //得到被选中的值
            let columnList = layerMap[selectVal];
            columnSelect(columnList)
        });
    })
</script>
<script>
</script>
</body>
</html>
